<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="/echarts/echarts.min.js"></script>
    <script src="/echarts/china.js"></script>
    <script src="/echarts/jquery-1.11.1.min.js"></script>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/layui/layui.js}"></script>
</head>
<body class="childrenBody">

<div>
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 900px;height:700px;"></div>
    </div>
</div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var dataList = [];
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: [
                {
                    type: 'value'
                }
            ]

        };

        $.ajax({
            url: "/queryBar",
            dataType: "json",
            success:function (data) {

                myChart.setOption({
                    xAxis: [
                        {
                            type: 'category',
                            data: data.cityList,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    series: [
                        {
                            name: 'Direct',
                            type: 'bar',
                            barWidth: '60%',
                            data: data.dataList
                        }
                    ]
                })
            }
        });

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
